<template>
  <div class='workers'>
    <!-- <OcrTrip /> -->
    <van-cell-group style='width:80vw;'>
      <van-field v-model='carNumber' label='车牌号' placeholder='请输入车牌号' readonly @click='keyState = true' />
    </van-cell-group>
    <div @click='scan' class='scan-style'>查询</div>
    <keyword :isShow='keyState' @exit='keyState = false' @inputchange='getKey' :oinp='carNumber'
             @ok='keyState = false' />
  </div>
</template>

<script>
import { Toast } from 'vant'
import keyword from '@/components/keyword'
import { getSstUserInfoForWorker } from '../../api/gov/home/index'
// import OcrTrip from '@/components/ocrTrip'
export default {
  // OcrTrip
  components: { keyword },
  props: {},
  data () {
    return {
      keyState: false,
      carNumber: '' // 车牌号
    }
  },
  mounted () {
    localStorage.setItem('type', 'sterilization')
    console.log(localStorage.getItem('type'))
  },
  methods: {
    getKey (val) {
      if (this.carNumber.length >= 8 && val != 'delete') {
        return false
      }
      if (val == 'delete') {
        this.carNumber = this.carNumber.slice(0, this.carNumber.length - 1)
      } else {
        this.carNumber += val
      }
    },
    scan () {
      if (!this.carNumber) return Toast.fail('请输入正确的车牌号')
      getSstUserInfoForWorker({ code: this.$route.query.code }).then(res => {
        if (res.data.errcode == 9933) {
          return Toast.fail('此账号无消杀权限')
        }
        if (res.data.errcode !== 0) return Toast.fail(res.data.errmsg)
        this.$router.push({ name: 'sterilizationDetail', query: { carNumber: this.carNumber } })
      })``
    }
  }
}
</script>
<style lang='less' scoped>
.workers {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url('../../assets/images/bl.png') no-repeat;
  background-size: cover;

  .scan-style {
    width: 80vw;
    height: 280px;
    background: #469af0;
    color: white;
    border-radius: 20px;
    text-align: center;
    line-height: 280px;
  }

  .scan-style-b {
    margin-top: 100px;
  }
}
</style>
